<template>
  <div class="yoyo-container mx-auto min-h-screen">
    <navBar :showMobileNavbar="false"></navBar>
    <div class="md:mx-4 bg-[#FFC736] md:hidden">
      <div class="relative">
        <img src="@/assets/images/zh/3.png" alt="定位" class="absolute top-0 right-0 w-300 h-100" />
      </div>

      <div class="mx-4 sm:mx-26 md:mx-40 lg:mx-52 xl:mx-76 2xl:mx-92 pb-14">
        <div class="flex flex-col items-center justify-center w-full">
          <div class="relative w-[80%] lg:w-[60%] felx items-center justify-center fade-in-section" data-delay="0">
            <img :src="img4Src" alt="大标题" class="w-full h-auto" />
          </div>

          <div class="relative w-full felx items-center justify-center mt-3 relative fade-in-section" data-delay="200">
            <img :src="img5Src" alt="大标题" class="w-full h-auto" />
            <img src="@/assets/images/zh/6.png" class="w-[44px] h-[44px] rotate-7 absolute -top-[10px] -right-[10px]" />
          </div>
        </div>

        <div class="relative mt-5 fade-in-section" data-delay="400">
          <img :src="img7Src" alt="小标题" class="w-[50%] h-auto" />
          <img :src="img10Src" class="w-full h-auto mt-2" />
          <img
            src="@/assets/images/zh/6.png"
            class="w-[28px] h-[28px] -rotate-8 absolute top-7 sm:top-12 md:top-13 lg:top-14 xl:top-10 2xl:top-10 left-1/2 -translate-x-1/2" />
          <img src="@/assets/images/zh/6.png" class="w-[28px] h-[28px] rotate-7 absolute bottom-0 right-0" />
        </div>

        <div class="relative mt-5 fade-in-section" data-delay="600">
          <img :src="img8Src" class="w-[50%] h-auto" />

          <div class="grid grid-cols-3 gap-x-3 relative mt-4">
            <img src="@/assets/images/zh/6.png" class="w-[36px] h-[36px] -rotate-8 absolute -top-[6px] left-0" />
            <img :src="img11Src" class="w-full h-auto" />
            <img :src="img12Src" class="w-full h-auto" />
            <img :src="img13Src" class="w-full h-auto" />
          </div>
          <div class="grid grid-cols-3 gap-x-3 mt-2">
            <img :src="img14Src" class="w-full h-auto" />
            <div class="relative">
              <img :src="img15Src" class="w-full h-auto" />
              <img src="@/assets/images/zh/6.png" class="w-[36px] h-[36px] rotate-10 absolute -top-[0px] -right-[10px]" />
            </div>
            <img :src="img16Src" class="w-full h-auto" />
          </div>
          <div class="grid grid-cols-3 gap-x-3 mt-2 relative">
            <div class="relative">
              <img src="@/assets/images/zh/6.png" class="w-[36px] h-[36px] -rotate-8 absolute -top-[0px] -right-[10px]" />
              <img :src="img17Src" class="w-full h-auto" />
            </div>
            <img :src="img18Src" class="w-full h-auto" />
            <img :src="img19Src" class="w-full h-auto" />
          </div>
        </div>

        <div class="relative mt-5 fade-in-section mb-26 md:mb-0" data-delay="800">
          <img :src="img9Src" class="w-[50%] h-auto" />
          <img :src="img20Src" class="w-full h-auto mt-2" />
          <img src="@/assets/images/zh/22.png" class="w-[80px] lg:w-[100px] absolute -bottom-[16px] -right-[10px]" />
        </div>
        <div
          :class="[
            'z-[999] fixed bottom-0 left-0 right-0 md:hidden pt-[10px] flex flex-col items-center justify-center mx-auto fade-in-section cursor-pointer click-button ',
          ]"
          :style="{
            opacity: isPressed ? 0.6 : '',
            paddingBottom: showTabbar ? '70px' : '20px',
            transition: 'padding-bottom 0.3s ease-out',
          }"
          @mousedown="handleMouseDown"
          @mouseup="handleMouseUp"
          @touchstart="handleMouseDown"
          @touchend="handleMouseUp">
          <img :src="img23Src" class="w-[50%] h-auto" />
        </div>

        <div
          class="hidden md:flex flex-col items-center justify-center mx-auto w-[60%] my-5 fade-in-section cursor-pointer click-button"
          :style="{ opacity: isPressed ? 0.6 : '' }"
          @mousedown="handleMouseDown"
          @mouseup="handleMouseUp"
          @touchstart="handleMouseDown"
          @touchend="handleMouseUp">
          <img :src="img23Src" class="w-full h-auto" />
        </div>
      </div>
    </div>

    <div class="hidden md:block md:mx-4 pb-14">
      <img :src="img1WebSrc" class="w-full h-auto" />
      <img :src="img2WebSrc" class="w-full h-auto" />
      <img :src="img3WebSrc" class="w-full h-auto" />

      <div
        class="flex-col items-center justify-center mx-auto w-[30%] my-5 fade-in-section cursor-pointer click-button"
        :style="{ opacity: isPressed ? 0.6 : '' }"
        @mousedown="handleMouseDown"
        @mouseup="handleMouseUp"
        @touchstart="handleMouseDown"
        @touchend="handleMouseUp">
        <img :src="img23Src" class="w-full h-auto" />
      </div>
    </div>
    <van-tabbar route :class="['z-999 transition-transform duration-300 flex md:hidden', { 'translate-y-full': !showTabbar }]">
      <van-tabbar-item :to="item.to" v-for="item in tabbarItems" :key="item.name">
        <template #icon>
          <img :src="item.icon" class="w-14 h-14" />
        </template>
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
import { mapActions, mapGetters, mapMutations } from "vuex"
import { Tabbar, TabbarItem } from "vant"
import { signInYoyoCoin } from "@/apis/mine"
export default {
  name: "YoyoCoinIntroduce",
  components: {
    [Tabbar.name]: Tabbar,
    [TabbarItem.name]: TabbarItem,
  },
  data() {
    return {
      isPressed: false,
      // tabbarItems: [
      //   { name: "cart", icon: require("@/assets/images/card.png"), to: { name: "cart", query: { showTabbar: true } }, w: 8 },
      //   { name: "home", icon: require("@/assets/images/home.png"), to: { name: "home" }, w: 8 },
      //   { name: "yoyoCoinIntroduce", icon: require("@/assets/images/yoyo.png"), to: { name: "yoyoCoinIntroduce" }, w: 10 },
      //   { name: "mine", icon: require("@/assets/images/mine.png"), to: { name: "mine" }, w: 10 },
      // ],
      // 滚动相关状态
      showTabbar: true,
      lastScrollTop: 0,
      scrollThreshold: 1, // 滚动阈值
    }
  },
  computed: {
    ...mapGetters({
      isZh: "lang/isZh",
    }),
    tabbarItems() {
      return this.isZh
        ? [
            { name: "home", icon: require("@/assets/images/tabbar/home.png"), to: { name: "home" }, w: 8 },
            {
              name: "yoyoCoinIntroduce",
              icon: require("@/assets/images/tabbar/yoyo-active.png"),
              to: { name: "yoyoCoinIntroduce" },
              w: 10,
            },
            { name: "cart", icon: require("@/assets/images/tabbar/cart.png"), to: { name: "cart", query: { showTabbar: true } }, w: 8 },
            { name: "mine", icon: require("@/assets/images/tabbar/my.png"), to: { name: "mine" }, w: 10 },
          ]
        : [
            { name: "home", icon: require("@/assets/images/tabbar/home-en.png"), to: { name: "home" }, w: 8 },
            {
              name: "yoyoCoinIntroduce",
              icon: require("@/assets/images/tabbar/yoyo-en-active.png"),
              to: { name: "yoyoCoinIntroduce" },
              w: 10,
            },
            { name: "cart", icon: require("@/assets/images/tabbar/cart-en.png"), to: { name: "cart", query: { showTabbar: true } }, w: 8 },
            { name: "mine", icon: require("@/assets/images/tabbar/my-en.png"), to: { name: "mine" }, w: 10 },
          ]
    },
    img4Src() {
      return this.isZh ? require("@/assets/images/zh/4.png") : require("@/assets/images/en/4.png")
    },
    img5Src() {
      return this.isZh ? require("@/assets/images/zh/5.png") : require("@/assets/images/en/5.png")
    },
    img7Src() {
      return this.isZh ? require("@/assets/images/zh/7.png") : require("@/assets/images/en/7.png")
    },
    img8Src() {
      return this.isZh ? require("@/assets/images/zh/8.png") : require("@/assets/images/en/8.png")
    },
    img9Src() {
      return this.isZh ? require("@/assets/images/zh/9.png") : require("@/assets/images/en/9.png")
    },
    img10Src() {
      return this.isZh ? require("@/assets/images/zh/10.png") : require("@/assets/images/en/10.png")
    },
    img11Src() {
      return this.isZh ? require("@/assets/images/zh/11.png") : require("@/assets/images/en/11.png")
    },
    img12Src() {
      return this.isZh ? require("@/assets/images/zh/12.png") : require("@/assets/images/en/12.png")
    },
    img13Src() {
      return this.isZh ? require("@/assets/images/zh/13.png") : require("@/assets/images/en/13.png")
    },
    img14Src() {
      return this.isZh ? require("@/assets/images/zh/14.png") : require("@/assets/images/en/14.png")
    },
    img15Src() {
      return this.isZh ? require("@/assets/images/zh/15.png") : require("@/assets/images/en/15.png")
    },
    img16Src() {
      return this.isZh ? require("@/assets/images/zh/16.png") : require("@/assets/images/en/16.png")
    },
    img17Src() {
      return this.isZh ? require("@/assets/images/zh/17.png") : require("@/assets/images/en/17.png")
    },
    img18Src() {
      return this.isZh ? require("@/assets/images/zh/18.png") : require("@/assets/images/en/18.png")
    },
    img19Src() {
      return this.isZh ? require("@/assets/images/zh/19.png") : require("@/assets/images/en/19.png")
    },
    img20Src() {
      return this.isZh ? require("@/assets/images/zh/20.png") : require("@/assets/images/en/20.png")
    },
    img23Src() {
      return this.isZh ? require("@/assets/images/zh/23.png") : require("@/assets/images/en/23.png")
    },

    img1WebSrc() {
      return this.isZh ? require("@/assets/images/zh-web/1.png") : require("@/assets/images/en-web/1.png")
    },
    img2WebSrc() {
      return this.isZh ? require("@/assets/images/zh-web/2.png") : require("@/assets/images/en-web/2.png")
    },
    img3WebSrc() {
      return this.isZh ? require("@/assets/images/zh-web/3.png") : require("@/assets/images/en-web/3.png")
    },
  },
  methods: {
    initFadeInAnimation() {
      const sections = document.querySelectorAll(".fade-in-section")

      sections.forEach((section, index) => {
        const delay = parseInt(section.dataset.delay) || index * 200

        setTimeout(() => {
          section.classList.add("fade-in-visible")
        }, delay)
      })
    },
    handleMouseDown() {
      this.isPressed = true
    },
    async handleMouseUp() {
      this.isPressed = false
      try {
        const res = await signInYoyoCoin()
        this.$toast(this.$t("yoyoCoins.signInSuccess"))
      } catch (error) {
        console.log("error :>> ", error)
      }
    },
    // 处理滚动事件 - 结合两者优点的混合逻辑
    handleScroll() {
      const scrollTop = window.pageYOffset || document.documentElement.scrollTop
      const windowHeight = window.innerHeight
      const documentHeight = document.documentElement.scrollHeight

      // 立即更新 Tabbar 显示逻辑（实时响应，无防抖）
      this.updateTabbarVisibility(scrollTop, windowHeight, documentHeight)
    },

    // Tabbar 显示逻辑（来自 Home.vue 的简单逻辑）
    updateTabbarVisibility(scrollTop, windowHeight, documentHeight) {
      // 判断是否滚动到页面底部（距离底部50px内）
      const isNearBottom = scrollTop + windowHeight >= documentHeight - 1

      // 如果在页面底部，显示tabbar
      if (isNearBottom) {
        this.showTabbar = true
        this.lastScrollTop = scrollTop
        return
      }

      // 判断滚动方向
      const scrollDirection = scrollTop > this.lastScrollTop ? "down" : "up"

      // 只有滚动距离超过阈值才触发显示/隐藏
      if (Math.abs(scrollTop - this.lastScrollTop) > this.scrollThreshold) {
        if (scrollDirection === "down") {
          // 向下滚动，隐藏tabbar
          this.showTabbar = false
        } else {
          // 向上滚动，显示tabbar
          this.showTabbar = true
        }
        this.lastScrollTop = scrollTop
      }
    },
  },
  mounted() {
    this.initFadeInAnimation()
  },
  created() {
    // 添加滚动事件监听
    window.addEventListener("scroll", this.handleScroll, { passive: true })
  },
}
</script>

<style scoped>
/* 渐入动画样式 */
.fade-in-section {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.8s ease-out;
}

.fade-in-section.fade-in-visible {
  opacity: 1;
  transform: translateY(0);
}

/* 覆盖点击按钮的过渡效果 */
.click-button {
  transition: transform 0.8s ease-out !important;
}

/* 自定义滚动条 */
::-webkit-scrollbar {
  width: 4px;
}

::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.1);
}

::-webkit-scrollbar-thumb {
  background: rgba(255, 165, 0, 0.5);
  border-radius: 2px;
}
/deep/.van-tabbar-item__icon img {
  height: auto;
}
</style>
